<template>
	<view class="container" :style="'background-image:  url(' + backgroundImage+')'">

		<view class="content"
			:style="'margin-top: ' + navigationBarHeight+';height: calc(100vh -' + navigationBarHeight+');'">
			<view class="horizontal" style="justify-content: space-between;margin-top: 15px;">
				<view class="horizontal" @click.stop="changeCarType">
					<view class="text_1" style=" margin-right: 10rpx ;height: 80rpx;">{{carHomeTitle}} </view>
					<image class="small_icon" src="@appstatic/car/car_home_more.png" mode='widthFix'
						v-if="myCarDataList.length>1" />
				</view>

				<view class="horizontal" @click.stop="toMyCar">
					<view class="text_2" style=" margin-right: 10rpx ">查看更多车型</view>
					<image class="arrow" src="@appstatic/community/activity_right_arrow.png" />
				</view>
			</view>

			<view class="horizontal" style="margin-top: 40px;">
				<image class="small_icon" src="@appstatic/car/car_energy_icon.png" />
				<view class="text_2" style=" margin-left: 10rpx ">蓄电池电压</view>
			</view>
			<view class="text_3" style=" margin-top: 11rpx ;margin-left: 16px;">{{vehicleBatteryVoltage}}<text class="text_2" style="margin-left: 10rpx;">V</text></view>

			<view class="horizontal" style="margin-top: 20px;" @click.stop="toCyclingStat">
				<image class="arrow" src="@appstatic/car/car_total_mileage_icon.png" />
				<view class="text_2" style=" margin-left: 10rpx ">总里程</view>
				<image class="arrow" style="margin-left: 3px;" src="@appstatic/car/activity_right_arrow_orange.png" />
			</view>
			<view class="text_3" style=" margin-top: 11rpx ;margin-left: 16px;">{{totalMile}}<text class="text_2" style="margin-left: 10rpx;">km</text></view>

			<view class="horizontal" style="margin-top: 20px;" @click.stop="toCyclingStat">
				<image class="arrow" src="@appstatic/car/car_today_mileage_icon.png" />
				<view class="text_2" style=" margin-left: 10rpx ">今日里程</view>
				<image class="arrow" style="margin-left: 3px;" src="@appstatic/car/activity_right_arrow_orange.png" />
			</view>
			<view class="text_3" style=" margin-top: 11rpx ;margin-left: 16px;">{{currentMile}}<text class="text_2" style="margin-left: 10rpx;">km</text></view>

			<view class="horizontal" style="margin-top: 20px;" @click.stop="toCyclingRank">
				<image class="arrow" src="@appstatic/car/car_ranking_icon.png" />
				<view class="text_2" style=" margin-left: 10rpx ">骑行排名</view>
				<image class="arrow" style="margin-left: 3px;" src="@appstatic/car/activity_right_arrow_orange.png" />
			</view>
			<view class="text_3" style=" margin-top: 11rpx ;margin-left: 16px;">{{rank}}</view>

			<view class="white_bg" style="margin-top: 60px;">
				<view class="horizontal-divide">
					<view class="navigation_view" @click.stop="yilianNative">
						<image class="navigation_icon" src="@appstatic/car/car_screen_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 导航投屏
						</view>
					</view>

					<view class="navigation_view" @click.stop="toCarStatus">
						<image class="navigation_icon" src="@appstatic/car/car_condition_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 车况查询
						</view>
					</view>

					<view class="navigation_view" @click.stop="toCarCheck">
						<image class="navigation_icon" src="@appstatic/car/car_check_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 车辆体检
						</view>
					</view>

					<view class="navigation_view" @click.stop="toMyCarList">
						<image class="navigation_icon" src="@appstatic/car/car_my_car_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 我的爱车
						</view>
					</view>
				</view>

				<view class="horizontal-divide">
					<view class="navigation_view" @click.stop="toTachograph">
						<image class="navigation_icon" src="@appstatic/car/car_recorder_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 行车记录仪
						</view>
					</view>

					<view class="navigation_view" @click.stop="toInstructions">
						<image class="navigation_icon" src="@appstatic/car/car_instructions_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 使用说明
						</view>
					</view>

					<view class="navigation_view" @click.stop="toMaintainOrder">
						<image class="navigation_icon" src="@appstatic/car/car_maintenance_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 维修保养
						</view>
					</view>

					<view class="navigation_view" @click.stop="toStoreList">
						<image class="navigation_icon" src="@appstatic/car/car_brand_home_icon.png" />
						<view class="text_4" style="margin-top: 5px;"> 派方之家
						</view>
					</view>
				</view>
			</view>

			<view class="style_bg" style="margin-top: 16px;">
				<view class="gradient_bg" @click="toCarLocation">

					<view class="horizontal address">
						<image class="small_icon_1" src="@appstatic/car/car_home_address_icon.png" />

						<view class="text_5 uni-commit" style=" margin-left: 5px;">
							{{posAddress}}
						</view>
					</view>
					<view class="horizontal address" style="margin-top: 10px;">
						<image class="small_icon_1" src="@appstatic/car/car_home_time_icon.png" />
						<view class="text_5" style=" margin-left: 5px ">{{posTime}}</view>
					</view>

				</view>
			</view>
			<view style="margin-top: 16px;margin-bottom: 30px;">
				<historyRouteView @toHistoryRoute="toHistoryRouteList" @toHistoryRouteList="toHistoryRouteList"
					:startTime="periodStartDate" :endTime="periodEndDate" :startAddress="startAddress"
					:endAddress="endAddress" model="首页"></historyRouteView>
			</view>

			<!-- </scroll-view> -->

		</view>

		<showMoreCarType v-if="myCarDataList.length>1" :isShowMore="showMoreCarType" :dataList="myCarDataList"
			@carType="carType"></showMoreCarType>

	</view>
</template>

<script>
	const app = getApp();
	const util = require('@/utils/util.js');
	const WSCoordinate= require("@/utils/WSCoordinate.js");
	const network = require('@/manager/network-manager.js');
	const dialog = require('@/utils/dialog.js');
	import historyRouteView from '@/components/historyRouteView.vue'
	import showMoreCarType from '@/components/showMoreCarType.vue'
	import map from "@utils/qqmap-wx-jssdk.min.js"
	const permission = require("@/utils/permission.js");
	// #ifdef APP-PLUS
	const YiLianModule = uni.requireNativePlugin('YiLianModule'); //调用
	// #endif
	export default {
		name: "carHome",
		props: {

		},
		data() {
			return {
				deviceId: '',
				provinceId: '',
				vin: '',


				showMoreCarType: false,
				carHomeTitle: '',
				backgroundImage: '@appstatic/car/car_home_starShip_bg.png',
				navigationBarHeight: "44px",
				myCarDataList: [],
				vehicleBatteryVoltage: '0.0',
				totalMile: '0',
				currentMile: '0',
				posTime: '',
				posAddress: '',
				rank: '0',
				startAddress: '',
				endAddress: '',
				periodStartDate: '',
				periodEndDate: '',
				segmentId: ''



			}
		},
		components: {
			historyRouteView,
			showMoreCarType
		},

		methods: {
			carHome_onLoad: function() {
				var that = this
				//#ifdef H5
				this.navigationBarHeight = '44px'
				//#endif
				//#ifdef APP-PLUS||MP-WEIXIN
				this.navigationBarHeight = app.globalData.statusBarHeight + 'px'
				//#endif
			},
			carHome_onShow: function(dataList) {
				this.myCarDataList = dataList
				this.carHome_onLoad()
				this.loadOtherData()

			},
			//获取页面信息
			loadOtherData: function() {
				var that = this
				var item = null
				for (var i = 0; i < that.myCarDataList.length; i++) {
					if (that.myCarDataList[i].isDefault == "1") {
						item = that.myCarDataList[i]
					}
				}
				if (item == null) {
					item = that.myCarDataList[0]
				}
				that.carType(item)
			},

			// 骑行排行
			toCyclingRank: function() {
				uni.navigateTo({
					url: '/module_car/cyclingHome/list/list?provinceId=' + this.provinceId + '&deviceId=' +
						this.deviceId
				})
			},
			// 骑行统计
			toCyclingStat: function() {
				uni.navigateTo({
					url: '/module_car/cyclingHome/statistics/statistics'
				})
			},
			//跳转到一期的爱车
			toMyCar: function() {
				uni.navigateTo({
					url: '/pages/car/car?showReturn=true'
				})
			},
			//跳转到导航投屏
			toMall: function() {
				uni.navigateTo({
					url: '/pages/mall/mall'
				})
			},
			//跳转车况数据
			toCarStatus: function() {
				uni.navigateTo({
					url: '/module_car/carStatus/carStatus'
				})
			},
			//跳转车辆体检
			toCarCheck: function() {
				uni.navigateTo({
					url: '/module_car/carCheck/carCheck'
				})
			},
			//跳转到历史轨迹列表
			toHistoryRouteList: function() {
				uni.navigateTo({
					url: '/module_car/historyList/historyList'
				})
			},
			//行车记录仪
			toTachograph: function() {
				uni.showToast({
					title: "敬请期待",
					duration: 3000,
					icon: 'none'
				});
	 
				// var that = this;
				// var uri = app.globalData.config.interfaces.URL_GET_SDK;
				// var params = {
				// 	vinStr: that.vin,
				// };
				// network.get(uri, params, 'form',{},true).then(res => {
				// 	if (res.code == 200) {
				// 		var resdata = res.data;
				// 		if(resdata.bsSDK ==1){
				// 			// #ifdef APP-PLUS
				// 			//初始化
				// 			var data = {
								
				// 			};
				// 			console.log(data);
				// 			YiLianModule.dvr(data, result => {
				// 				console.log("dvr：" + JSON.stringify(result));
				// 			});
				// 			// #endif
				// 		}else{
				// 			dialog.toast("暂无可用SDK");
				// 		}
				// 	} else {
				// 		dialog.toast(res.message);
				// 	}
				// }).catch(res => {
				// 	dialog.toast("获取可用SDK失败");
				// });
			},
		 
			// 投屏、
			yilianNative: function() {
					// #ifdef APP-PLUS
					
					//初始化
					var data = {
						 'sq': 0,
						 'yl': 1,
						// 'longitude': '31',
						// 'latitude': '1111',
						// 'address': 'asdadsasd',
						// 'device': 'http://www.carbit.com.cn/down5/262?modelid=32802&action=8&ssid=&pwd=&auth=&mac=6a:b9:d3:f3:4d:db&name=EASYCONN_5G-F34DDB',
					};
					console.log(data);
					YiLianModule.init(data, result => {
						console.log("YiLianModule：" + JSON.stringify(result));
					});
					// #endif


			// 	console.log("导航投屏");
			// 	var that = this;
			// 	var uri = app.globalData.config.interfaces.URL_GET_SDK;
			// 	var params = {
			// 		vinStr: that.vin,
			// 	};
			// 	var mobile = app.globalData.userInfo.phone;
			// 	network.get(uri, params, 'form',{},true).then(res => {
			
			// 		if (res.code == 200) {
			// 			var resdata = res.data;
			// 			if(resdata.sqSDK ==1 || resdata.ylSDK ==1){
			// 				// #ifdef APP-PLUS
			// 				//初始化
			// 				var data = {
			// 					 'sq': resdata.sqSDK,
			// 					 'yl': resdata.ylSDK,
			// 					 'mobile':mobile
			// 				};
			// 				console.log(data);
			// 				YiLianModule.init(data, result => {
			// 					console.log("YiLianModule：" + JSON.stringify(result));
			// 				});
			// 				// #endif
			// 			}else{
			// 				dialog.toast("暂无可用SDK");
			// 			}
			// 		} else {
			// 			dialog.toast(res.message);
			// 		}
			// 	}).catch(res => {
			// 		dialog.toast("获取可用SDK失败");
			// 	});
			},
			//使用说明(通过vin获取使用说明pdf图片)
			toInstructions: function() {
				var that = this;
				// that.vin = 'LF200208090000003'
				var uri = app.globalData.config.interfaces.URL_GET_MATERIALBYVIN;
				var params = {
					vin: that.vin
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (res.message == '操作成功') {
							var fileName = res.data.fileName 
							var fileUrl = res.data.fileUrl
							uni.navigateTo({
								url: '/module_car/instructions/instructions?fileName=' + fileName +
									'&fileUrl=' + fileUrl
							})
						} else {
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500)
						}

					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
				}).catch(res => {
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
				});

			},
			//跳转到维修保养预约界面
			toMaintainOrder:function(){
				uni.navigateTo({
					url: '/module_car/maintainOrder/maintainOrder'
				})
				
				
				
				
				
				// uni.navigateTo({
				// 	url: '/pages/user/weixiubaoyang3'
				// })
				
				
				
			},
			// toHistoryRoute: function() {
			// 	console.log("得劲")
			// },
			//弹出下拉框选择车型
			changeCarType: function() {
				this.showMoreCarType = !this.showMoreCarType
			},

			//选择车型
			carType: function(item) {
				var that = this;
				that.showMoreCarType = false

				if (item.vehicleName == undefined||item.vehicleName == null||item.vehicleName == "") {
					that.carHomeTitle = "我的" + item.modelName
				} else {
					that.carHomeTitle = "我的" + item.vehicleName
				}


				that.deviceId = item.deviceId
				that.provinceId = item.provinceId
				that.vin = item.vin

				if (item.imageBackground != null && item.imageBackground != '' && item.imageBackground != undefined) {
					that.backgroundImage = item.imageBackground
				} else {
					if (item.modelName == '星舰3') {
						that.backgroundImage = '@appstatic/car/car_home_starShip_bg.png'
					} else if (item.modelName == '引力') {
						that.backgroundImage = '@appstatic/car/car_home_gravitation_bg.png'
					}
				}

				that.queryMileInfo()
				that.queryVehicleStatus()
				that.queryMileRanking()
				that.queryVehicleLocationInfo()
				that.queryLastTrackSegment()
				that.setDefaultCar(item)



			},

			//设为当前用车
			setDefaultCar: function(item) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_SETDEFAULTCAR;
				var params = {
					id: item.id,
					userId: app.globalData.userInfo.id
				};
				network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						uni.setStorageSync('deviceId', that.deviceId)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: res.message,
								duration: 3000,
								icon: 'none'
							})
						}, 500)
					}
				}).catch(res => {
					setTimeout(() => {
						uni.showToast({
							title: res.errMsg,
							duration: 3000,
							icon: 'none'
						})
					}, 500)
				});



			},
			//跳转我的爱车
			toMyCarList: function() {
				uni.navigateTo({
					url: '/module_car/myCarList/myCarList'
				})
			},
			//跳转派方之家
			toStoreList: function() {
				uni.navigateTo({
					url: '/module_car/pages/stores/storeList'
				})
			},
			//跳转到爱车位置
			toCarLocation: function() {
				uni.navigateTo({
					url: '/module_car/carLocation/carLocation'
				})
			},
			//查询总里程统计
			queryMileInfo: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYMILEINFO;
				var params = {
					deviceId: that.deviceId
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (res.data.totalMile != null&&res.data.totalMile != undefined&&res.data.totalMile != '') {
							that.totalMile = res.data.totalMile
						}
						if (res.data.currentMile != null&&res.data.currentMile != undefined&&res.data.currentMile != '') {
							that.currentMile = res.data.currentMile
						}


					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			//查询剩余油量/电量、蓄电池电压
			queryVehicleStatus: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYVEHICLESTATUS;
				var params = {
					deviceId: that.deviceId,

				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.vehicleBatteryVoltage = res.data.vehicleBatteryVoltage
						if(that.vehicleBatteryVoltage==undefined||that.vehicleBatteryVoltage==null||that.vehicleBatteryVoltage==''){
							that.vehicleBatteryVoltage = '0.0'
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			//查询日/周个人里程排名
			queryMileRanking: function() {
				var that = this;

				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYMILERANKING;
				var params = {
					deviceId: that.deviceId,
					provinceId: that.provinceId,
					type: 'day'
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (res.data.detail.currentUser.rank != undefined && res.data.detail.currentUser
							.rank != null && res.data.detail.currentUser.rank != '') {
							that.rank = res.data.detail.currentUser.rank
						}


					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			// 查询最近位置信息
			queryVehicleLocationInfo: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYVEHICLELOCATIONINFO;
				var params = {
					deviceId: that.deviceId
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						var detail = JSON.parse(res.data.detail)
						that.posTime = detail.posTime
						if (that.posTime == '' || that.posTime == null || that.posTime == undefined) {
							that.posTime = detail.gpsPosTime
						}
						var posMethod = detail.posMethod
						var latitude;
						var longitude;
						
						//定位方式 1：gps 定位，2：base 定位
						if (posMethod == '1') {
							//上报时间
							that.posTime = detail.posTime
							//纬度
							latitude = detail.posLatitude
							//经度
							longitude = detail.posLongitude
						} else if (posMethod == '2') {
							//上报时间
							that.posTime = detail.gsmPosTime
							//纬度
							latitude = detail.gsmPosLatitude
							//经度
							longitude = detail.gsmPosLongitude
						}
						var zuobiaoList = WSCoordinate.transformFromWGSToGCJ(parseFloat(latitude),parseFloat(longitude))
						longitude = zuobiaoList.longitude
						latitude = zuobiaoList.latitude
						var qqmapsdk = new map({
							key: 'SKABZ-LZZW5-VL7IR-IUYJA-L73D6-KMBO6' // 必填，去腾讯地图申请
						});
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: (res1) => {
								console.log(JSON.stringify(res1))

								that.posAddress = res1.result.address

							},
							fail: (error) => {

							}
						});

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			
			//查询轨迹分段最后一段
			queryLastTrackSegment: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYLASTTRACKSEGMENT;
				var params = {
					deviceId: that.deviceId
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.startAddress = res.data.detail.startAddress
						that.endAddress = res.data.detail.endAddress
						that.periodStartDate = res.data.detail.periodStartDate.substring(11, 16)
						that.periodEndDate = res.data.detail.periodEndDate.substring(11, 16)
						that.segmentId = res.data.detail.segmentId



					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #EDEDED;
	}

	.container {
		background: top left no-repeat;
		background-size: 100vw, 143vw;
		width: 100vw;
		height: calc(100vh - 50px);
	}

	.content {
		width: calc(100% - 30px);
		z-index: 100;
		position: absolute;
		margin-left: 15px;
		margin-right: 15px;
	}

	.horizontal {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.small_icon {
		width: 16px;
		height: 16px;
	}

	.small_icon_1 {
		width: 10px;
		height: 10px;
	}





	.carImage {
		width: 250px;
		height: 300px;
	}

	.arrow {
		width: 15px;
		height: 13px;
		align-self: center;
	}

	.white_bg {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 16px;
		padding-bottom: 16px;
		gap: 8px;
		background: #FFFFFF;
		border-radius: 4px;
	}

	.horizontal-divide {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.navigation_view {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 25%;
	}

	.navigation_icon {
		width: 33px;
		height: 33px;
	}

	.style_bg {
		width: 100%;
		height: 70px;
		background-image: url('@appstatic/car/car_style_bg.png');
		border-radius: 4px;
	}

	.gradient_bg {
		width: 100%;
		height: 100%;
		background: linear-gradient(91.8deg, #FFFFFF 14.26%, rgba(255, 255, 255, 0) 100%);
		border-radius: 4px;
		display: flex;
		align-content: center;
		flex-direction: column;
		justify-content: center
	}

	.address {
		margin-left: 16px;
		margin-right: 16px;
		width: calc(100% - 32px);
	}

	.uni-commit {
		width: calc(100% - 15px);
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1; //文字上限行
		-webkit-box-orient: vertical;
	}



	.text_1 {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		line-height: 29px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}

	.text_2 {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}

	.text_3 {
		font-family: 'Arial';
		font-style: italic;
		font-weight: 700;
		font-size: 20px;
		line-height: 23px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}

	.text_4 {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 19px;
		display: flex;
		align-items: center;
		text-align: center;
		color: #3D3A3A;
	}

	.text_5 {
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 15px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}
</style>
